<<template>
  <div style="margin: 10px;">
    <el-row :gutter="10">
        <el-col :span="5">
            <el-card class="cardbox">
                <div class="title">设备状态监测</div>
                <div style="text-align: center;">控制总数&nbsp;&nbsp;&nbsp;<span style="font-size: 18px;font-weight: bold;">{{ shebeiSum }}</span></div>
                <el-row :gutter="10">
                    <el-col :span="12" style=" text-align: center;">
                        <div class="shebeiTop">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="require('@/assets/img/zai.png')"
                                >
                            </el-image>
                        </div>
                        <div class="shebeiTop">在线</div>
                        <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">98</div>
                    </el-col>
                    <el-col :span="12" style=" text-align: center;">
                        <div class="shebeiTop">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="require('@/assets/img/li.png')"
                                >
                            </el-image>
                        </div>
                        <div class="shebeiTop">离线</div>
                        <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">2</div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="14">
            <el-card class="cardbox">
                <div class="title">室外温度变化</div>
                <div class="echartsbox" ref="echarts">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="5">
            <el-card class="cardbox">
                <div class="title">30天环境告警处理率</div>
                <div class="echartsbox" ref="echarts3">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="10" style="">
        <el-col :span="10">
            <el-card class="cardbox2">
                <div class="title">近30天环境告警类型统计</div>
                <div class="echartsbox2" ref="echarts2">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="14">
          <el-card class="cardbox2">
              <div class="title">最新告警记录</div>
              <div class="cesuo-list">
              <el-table
              :data="tableData"
              style="width: 100%;font-size: 12px;"
              >
                <el-table-column
                  prop="reportType"
                  label="告警类型"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="reportDate"
                  label="告警时间"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="equipmentName"
                  label="设备名称"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="equipmentPlace"
                  label="设备位置"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="threshold"
                  label="阈值"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="actual"
                  label="实际值"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="whether"
                  label="是否特工单"
                  align="center">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        shebeiSum:'100',
        tableData:[{
            reportType:'计划一',
            reportDate:'2022/02/02 16:00',
            equipmentName:'CW001',
            equipmentPlace:'一栋一层202',
            threshold:'24°C',
            actual:'30°C',
            whether:'是'
        },{
            reportType:'计划一',
            reportDate:'2022/02/02 16:00',
            equipmentName:'CW001',
            equipmentPlace:'一栋一层202',
            threshold:'24°C',
            actual:'30°C',
            whether:'是'
        },{
            reportType:'计划一',
            reportDate:'2022/02/02 16:00',
            equipmentName:'CW001',
            equipmentPlace:'一栋一层202',
            threshold:'24°C',
            actual:'30°C',
            whether:'是'
        },{
            reportType:'计划一',
            reportDate:'2022/02/02 16:00',
            equipmentName:'CW001',
            equipmentPlace:'一栋一层202',
            threshold:'24°C',
            actual:'30°C',
            whether:'是'
        },],
        huanjingtongjiData:[{name:'高温告警',value:'22'},{name:'低温告警',value:'12'},{name:'干燥告警',value:'32'},{name:'潮湿告警',value:'25'},{name:'PM2.5超标',value:'34'},{name:'二氧化碳超标',value:'36'}],
        huanjingchuliData:[{name:'已处理',value:'80'},{name:'未处理',value:'20'}],
        chulilvNums:'80%'
    }
  },

  created () {
  },
  mounted () {
    this.shiwaiwenduEcharts()
    this.huanjingtongjiEcharts()
    this.huanjingchuliEcharts()
  },
  methods: {
    //室外温度变化
    shiwaiwenduEcharts(){
      var echarts=this.$refs.echarts;
			let myChart = this.$echarts.getInstanceByDom(
			  this.$refs.echarts
			);
			if (myChart == null) {
			  myChart = this.$echarts.init(echarts);
			}
			var option;
			option = {
			  color:'#6699ff',
			    tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      type: 'cross',
			      label: {
			        backgroundColor: '#6a7985'
			      }
			    }
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '6%',
				top:'20',
			    containLabel: true
			  },
			  yAxis: {
			    type: 'value',
			    boundaryGap: false,
			  },
			  series: [
			    {
			      data: [120, 282, 111, 234, 220, 340, 310],
			      type: 'line',
			      areaStyle: {
			        opacity: 0.8,
			        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			          {
			            offset: 0,
			            color: '#3399ff'
			          },
			           {
			            offset: 0.5,
			            color: '#3399ff'
			          },
			          {
			            offset: 1,
			            color: '#ffffff'
			          }
			        ])
			      },
			      emphasis: {
			        focus: 'series'
			      },
			      smooth: true,
			    }
			  ]
			};
				option && myChart.setOption(option);
				//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    },
    //环境告警统计
    huanjingtongjiEcharts(){
      var dataValue=this.huanjingtongjiData
      var echarts2=this.$refs.echarts2;
			let myChart = this.$echarts.getInstanceByDom(
			  this.$refs.echarts2
			);
			if (myChart == null) {
			  myChart = this.$echarts.init(echarts2);
			}
			var option;
      option = {
          tooltip: {
              trigger: 'item'
          },
          legend: {
              orient: 'vertical',//字体竖着排，干掉后横着排
              top: '10%',//调整到顶部的距离
              left: '5%',
              formatter: function (data) {
              //显示提示框名字以及数量
              let tempArr = dataValue.filter((item) => item.name === data);
              return `${tempArr[0].name}    ${tempArr[0].value} `;
            },
          },
          series: [{
              // name: 'Access From',
              type: 'pie',
              center:['60%','50%'],//调整饼图的位置
              radius: ['30%', '50%'],
              data:this.huanjingtongjiData ,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
        }]
      };
        option && myChart.setOption(option);
				//自适应屏幕大小
				window.addEventListener('resize', function() 
        {
          myChart.resize()
        })
    },
    //环境告警处理率
    huanjingchuliEcharts(){
      var dataValue1=this.huanjingchuliData
      var echarts3=this.$refs.echarts3;
			let myChart = this.$echarts.getInstanceByDom(
			  this.$refs.echarts3
			);
			if (myChart == null) {
			  myChart = this.$echarts.init(echarts3);
			}
			var option;
      option = {
        title:{
          subtext:this.chulilvNums,
		      subtextStyle:{
		        color:'#999999',
            fontSize:'29'
		      },
		      textAlign:'center',
		      left: '48%',
		      top: '40%'

        },
          tooltip: {
              trigger: 'item'
          },
          legend: {
              orient: 'vertical',//字体竖着排，干掉后横着排
              top: '1%',//调整到顶部的距离
              left: '5%',
              formatter: function (data) {
              //显示提示框名字以及数量
              let tempArr = dataValue1.filter((item) => item.name === data);
              return `${tempArr[0].name}    ${tempArr[0].value}% `;
            },
          },
          series: [{
              // name: 'Access From',
              type: 'pie',
              center:['50%','50%'],//调整饼图的位置
              radius: ['30%', '50%'],
              data:this.huanjingchuliData ,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
        }]
      };
        option && myChart.setOption(option);
				//自适应屏幕大小
				window.addEventListener('resize', function() 
        {
          myChart.resize()
        })
    }
  },
}
</script>
<style lang="scss" scoped>
.echartsbox{
    width: 100%;
    height: 260px;
}
.echartsbox2{
  width: 100%;
    height: 360px;
}
.title{
	padding: 10px;
	font-weight: bold;
}
.cardbox{
    height: 300px;
    
}
.shebeiTop{
    margin-top: 20px;
    font-size: 12px;
}
.cardbox2{
    margin-top: 10px;
    height: 400px;
}
</style>
